<template>
  <div class="invita over-bg">
    <div class="title text-left text-18 person-bg">{{ $t("user.invite") }}</div>
    <div
      class="detail-box mb-20 flex js-sp align-center text-left"
      v-if="state.flag && state.leverInfo.second_lever_distribution"
    >
      <!-- <div class="detail-box mb-20 flex js-sp align-center text-left"> -->
      <div class="flex align-center">
        <div class="lever-box point" @click="showLevelDetail">
          <div class="lever">
            {{ state.leverInfo.current_level_name || "--" }}
          </div>
          <div class="flex align-center mb-6">
            <div>{{ $t("user.currentLevel") }}:</div>
            <div class="current-lever">
              {{ state.leverInfo.current_level_name || "--" }}
            </div>
          </div>
          <div class="flex align-center" v-if="state.leverInfo.current_ratio">
            <div>{{ $t("user.rebateRatio") }}:</div>
            <div class="current-lever">
              {{
                state.leverInfo.current_ratio[0]
                  ?.second_lever_distribution_ratio > 0
                  ? rideFix(
                      state.leverInfo.current_ratio[0]
                        ?.second_lever_distribution_ratio,
                      100
                    )
                  : "--"
              }}%
            </div>
          </div>
        </div>
        <div
          class="bdl-borderBase flex flex-column progress-box bdr-borderBase"
        >
          <div class="flex align-center mb-27">
            <div class="font-12 color-88" v-if="!state.leverInfo.is_top">
              {{ $t("user.distancetoNextLevel")
              }}{{ state.leverInfo.next_level_name }}{{ $t("user.condition") }}
            </div>
            <div class="font-12 color-88" v-else>
              {{ $t("user.fullClass") }}
            </div>
            <el-tooltip class="icons" effect="dark" placement="top">
              <template #content>
                <div v-if="!state.leverInfo.is_top">
                  <div>{{ $t("formTip.promotionDescription") }}</div>
                  <div
                    v-for="(item, index) in state.leverInfo.condition"
                    :key="index"
                  >
                    {{
                      item.condition_name === "inviteCount"
                        ? item.show_status
                          ? $t("formTip.promotionDescription1")
                          : ""
                        : item.condition_name === "transactionVolumeTotal"
                        ? item.show_status
                          ? $t("formTip.promotionDescription2")
                          : ""
                        : item.condition_name === "inviteDirectCount"
                        ? item.show_status
                          ? $t("formTip.promotionDescription3")
                          : ""
                        : item.condition_name === "inviteTransactionVolumeTotal"
                        ? item.show_status
                          ? $t("formTip.promotionDescription4")
                          : ""
                        : item.show_status
                        ? $t("formTip.promotionDescription5")
                        : ""
                    }}
                  </div>
                  <!-- <div>{{ $t("formTip.promotionDescription1") }}</div>
                  <div>{{ $t("formTip.promotionDescription2") }}</div>
                  <div>{{ $t("formTip.promotionDescription3") }}</div>
                  <div>{{ $t("formTip.promotionDescription4") }}</div>
                  <div>{{ $t("formTip.promotionDescription5") }}</div>-->
                </div>
                <div v-else>
                  {{
                    $t("user.highestLevel", {
                      level: state.leverInfo.current_level_name,
                    })
                  }}
                </div>
              </template>
              <svg-icon data-_icon-name="ic_invite_why"></svg-icon>
            </el-tooltip>
          </div>
          <div class="mbb-17 w-520">
            <div v-if="state.leverInfo.condition">
              <div
                class="flex align-center mb-17"
                v-for="(item, index) in state.leverInfo.condition"
                :key="index"
                v-show="item.show_status"
              >
                <div class="w_80 break-all">
                  {{
                    item.condition_name === "inviteCount"
                      ? $t("user.numberofPromotion")
                      : item.condition_name === "transactionVolumeTotal"
                      ? $t("user.transactionAmount")
                      : item.condition_name === "inviteDirectCount"
                      ? $t("user.directNumberofPeople")
                      : item.condition_name === "inviteTransactionVolumeTotal"
                      ? $t("user.totalTransaction")
                      : $t("user.selfTradingVolume")
                  }}{{
                    state.leverInfo.invite_user_authentication_status &&
                    item.condition_name !== "selfTransactionVolumeTotal"
                      ? $t("user.realName")
                      : ""
                  }}
                </div>
                <el-progress
                  v-if="item.next_value"
                  :percentage="
                    parseFloat((item.current_value / item.next_value) * 100) >
                    100
                      ? 100
                      : parseFloat((item.current_value / item.next_value) * 100)
                  "
                  :stroke-width="10"
                  class="progress"
                >
                  <span class="progress-text" v-if="!state.leverInfo.is_top">
                    {{ $currency(item.current_value) }}/{{
                      $currency(item.next_value)
                    }}
                    {{
                      item.condition_name === "inviteCount" ||
                      item.condition_name === "inviteDirectCount"
                        ? $t("user.people")
                        : "USDT"
                    }}
                  </span>
                  <span class="progress-text" v-else>
                    {{ $t("assets.completed") }}
                  </span>
                </el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex js-sp align-start flex-grow-1">
        <div class="text-center">
          <div class="rebate">{{ $t("user.rebateToday") }}</div>
          <div class="rebate-num flex align-center js-ct">
            <el-tooltip
              effect="dark"
              placement="top"
              v-if="state.userBrokerageInfo.brokerage_today"
            >
              <template #content>{{
                $currency(state.userBrokerageInfo.brokerage_today) || 0
              }}</template>
              <div>
                {{
                  state.userBrokerageInfo.brokerage_today > 10000
                    ? $currency(
                        decimalDigitsInputFilter(
                          state.userBrokerageInfo.brokerage_today / 10000,
                          2
                        )
                      ) + "w"
                    : $currency(
                        decimalDigitsInputFilter(
                          state.userBrokerageInfo.brokerage_today,
                          2
                        )
                      ) || 0
                }}
              </div>
            </el-tooltip>
            <div v-else>
              {{
                $currency(
                  decimalDigitsInputFilter(
                    state.userBrokerageInfo.brokerage_today,
                    2
                  )
                )
              }}
            </div>
          </div>
        </div>
        <div class="text-center">
          <div class="rebate">{{ $t("user.cumulativeRebate") }}</div>
          <div class="rebate-num flex align-center js-ct">
            <el-tooltip
              effect="dark"
              placement="top"
              v-if="state.userBrokerageInfo.brokerage_total"
            >
              <template #content>{{
                state.userBrokerageInfo.brokerage_total || 0
              }}</template>
              <div>
                {{
                  state.userBrokerageInfo.brokerage_total > 10000
                    ? $currency(
                        decimalDigitsInputFilter(
                          state.userBrokerageInfo.brokerage_total / 10000,
                          2
                        )
                      ) + "w"
                    : $currency(
                        decimalDigitsInputFilter(
                          state.userBrokerageInfo.brokerage_total,
                          2
                        )
                      ) || 0
                }}
              </div>
            </el-tooltip>
            <div v-else>
              {{
                $currency(
                  decimalDigitsInputFilter(
                    state.userBrokerageInfo.brokerage_total,
                    2
                  )
                )
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box flex js-sp align-center person-bg mb-20">
      <div class="invita-left">
        <div class="textperson-t3 text-14 text-left">
          {{ $t("user.invitecode") }}
        </div>
        <div class="kerword radius flex js-sp">
          <span>{{ newuserinfo?.invite_code }}</span>
          <span
            class="text-login point"
            @click="copy(newuserinfo.invite_code)"
            >{{ $t("global.copy") }}</span
          >
        </div>
      </div>
      <div class="invita-center">
        <div class="textperson-t3 text-14 text-left">{{ $t("user.link") }}</div>
        <div class="keylink radius flex js-sp">
          <span>
            {{ state.inviteUrl }}register?code={{ newuserinfo?.invite_code }}
          </span>
          <span
            class="text-login point"
            @click="
              copy(
                state.inviteUrl +
                  'register?code=' +
                  newuserinfo?.invite_code +
                  '&local=' +
                  inviteLocal
              )
            "
            >{{ $t("global.copy") }}</span
          >
        </div>
      </div>
      <div class="invita-right bdl-borderBase flex js-ar">
        <div class>
          <div class="textperson-t3 text-14 mb-13">
            {{ $t("user.invitenum") }}
          </div>
          <div class="textperson-t2 text-18">
            {{ newuserinfo?.invite_num }}
          </div>
        </div>
        <div class>
          <div class="textperson-t3 text-14 mb-13">
            {{ $t("stock.TotalRevenue") }}（USDT）
          </div>
          <div class="textperson-t2 text-18">
			  {{ newuserinfo?.total_revenue }}
            <!-- <el-tooltip
              effect="dark"
              placement="top"
              v-if="state.data?.month_earnings"
            >
              <template #content>{{
                $currency(state.data?.month_earnings) || 0
              }}</template>
              <div>
                {{
                  state.data?.month_earnings > 10000
                    ? $currency(
                        decimalDigitsInputFilter(
                          state.data?.month_earnings / 10000,
                          2
                        )
                      ) + "w"
                    : $currency(
                        decimalDigitsInputFilter(state.data?.month_earnings, 2)
                      ) || 0
                }}
              </div>
            </el-tooltip>
            <div v-else>
              {{
                $currency(
                  decimalDigitsInputFilter(state.data?.month_earnings, 2)
                )
              }}
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 表格数据 -->
    <div class="tab-box person-bg flex js-st align-center point bdb-borderBase">
      <div
        class="tab text-14"
        @click="changeTab(1)"
        :class="{ 'text-bold active-line': partnerType === 1 }"
      >
        {{ $t("user.invitedetail") }}
      </div>
      <div
        class="tab text-14"
        @click="changeTab(2)"
        :class="{ 'text-bold active-line': partnerType === 2 }"
      >
        {{ $t("user.rewarddetail") }}
      </div>
    </div>
    <div class="table person-bg mb-20">
      <!-- <el-form :model="state.param" class="invite-header mbb-10 text-left">
        <div class="flex align-center">
          <el-form-item label>
            <el-date-picker
              class="w_85"
              v-model="state.datetime"
              type="datetimerange"
              format="YYYY-MM-DD HH:mm:ss"
              :range-separator="$t('exchange.to')"
              :start-placeholder="$t('exchange.startDate')"
              :end-placeholder="$t('exchange.endDate')"
              prefix-icon="el-icon-date"
              @change="changeDate"
            />
          </el-form-item>
          <el-form-item class="ml-10">
            <el-button
              type="primary"
              :loading="state.loading"
              @click="onSubmit"
              >{{ $t("exchange.inquire") }}</el-button
            >
          </el-form-item>
        </div> -->
        <!-- <el-form-item>
          <el-tag
            :class="
              state.tagId === item.id
                ? 'mr-8 tags point active-tags text-blue'
                : 'mr-8 tags point'
            "
            v-for="item in state.items"
            :key="item.label"
            :type="item.type"
            effect="plain"
            @click="clickTag(item.id)"
            >{{ item.label }}</el-tag
          >
        </el-form-item>
      </el-form> -->
	  <div class="flex js-st header" style="border-bottom: 1px solid #eaecef;">
		  <div>{{$t('user.invitecount')}}</div>
		  <div>{{$t('assets.time')}}</div>
	  </div>
	  <div class="flex js-st header" v-if="fenxianglist.length > 0" v-for="(item,index) in fenxianglist" :key="index">
		  <div>{{item.mobile.substring(0,4) || item.email.substring(0,4)}} ***</div>
		  <div>{{item.updated_at}}</div>
	  </div>
	  <div v-if="fenxianglist.length == 0" style="padding-bottom: 40px;">
		<Norecord />
	  </div>
      <div class="pageno flex js-ed text-t2 point">
        <div class="last" @click="previous">{{ $t("user.previous") }}</div>
        <div class="next" @click="next">{{ $t("user.nextpage") }}</div>
      </div>
    </div>
    <div class="invita-rule text-left person-bg">
      <div class="invita-title text-t1 bold mb-13">
        {{ $t("user.inviterule") }}
      </div>
      <div class="rule text-t2 text-14">
        <div>1. {{ $t("user.invitetip1") }}；</div>
        <div>2. {{ $t("user.invitetip2") }}；</div>
        <div>3. {{ $t("user.invitetip3") }}；</div>
        <div>4. {{ state.name }} {{ $t("user.invitetip4") }}。</div>
      </div>
    </div>
    <!-- 返佣比例说明 -->
    <el-dialog
      :title="$t('formTip.tip')"
      v-model="state.dialogVisible"
      width="600px"
    >
      <div class="text-left pb-dialog">
        <div class="dialog-lever-box flex">
          <div class="lever font-16">
            {{ state.leverInfo.current_level_name || "--" }}
          </div>
          <div class="ml-12">
            <div class="flex align-center mb-6">
              <div>{{ $t("user.currentLevel") }}:</div>
              <div class="current-lever">
                {{ state.leverInfo.current_level_name || "--" }}
              </div>
            </div>
            <div class="flex align-center">
              <div>{{ $t("user.rebateRatio") }}:</div>
              <div class="current-lever">
                {{
                  state.leverInfo.current_ratio.length > 0
                    ? rideFix(
                        state.leverInfo.current_ratio[0]
                          .second_lever_distribution_ratio,
                        100
                      )
                    : 0
                }}%
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="dialog-item-title">{{ $t("user.secondLevelRatio") }}</div>
          <div class="flex js-st flex-wrap align-center rebate-box">
            <div
              class="flex align-center w_50 mt-12"
              v-for="item in state.leverInfo.current_ratio"
              :key="item.invite_hierarchy"
            >
              <div>
                {{ NumberToChinese(item.invite_hierarchy)
                }}{{ $t("user.levelRebateRatio") }}:
              </div>
              <div class="current-lever">
                {{
                  item.second_lever_distribution_ratio > 0
                    ? rideFix(item.second_lever_distribution_ratio, 100)
                    : 0
                }}%
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="dialog-item-title">
            {{ $t("user.currencyLevelRatio") }}
          </div>
          <div class="flex js-st flex-wrap align-center">
            <div
              class="flex align-center w_50 mt-12"
              v-for="item in state.leverInfo.current_ratio"
              :key="item.invite_hierarchy"
            >
              <div>
                {{ NumberToChinese(item.invite_hierarchy)
                }}{{ $t("user.levelRebateRatio") }}:
              </div>
              <div class="current-lever">
                {{
                  item.transaction_distribution_ratio > 0
                    ? rideFix(item.transaction_distribution_ratio, 100)
                    : 0
                }}%
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="dialog-item-title">{{ $t("user.wealthLevelRatio") }}</div>
          <div class="flex js-st flex-wrap align-center">
            <div
              class="flex align-center w_50 mt-12"
              v-for="item in state.leverInfo.current_ratio"
              :key="item.invite_hierarchy"
            >
              <div>
                {{ NumberToChinese(item.invite_hierarchy)
                }}{{ $t("user.levelRebateRatio") }}:
              </div>
              <div class="current-lever">
                {{
                  item.active_distribution_ratio > 0
                    ? rideFix(item.active_distribution_ratio, 100)
                    : 0
                }}%
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="dialog-item-title">
            {{ $t("freeMoney.rechargeRateLevel") }}
          </div>
          <div class="flex js-st flex-wrap align-center">
            <div
              class="flex align-center w_50 mt-12"
              v-for="item in state.leverInfo.current_ratio"
              :key="item.invite_hierarchy"
            >
              <div>
                {{ NumberToChinese(item.invite_hierarchy)
                }}{{ $t("user.levelRebateRatio") }}:
              </div>
              <div class="current-lever">
                {{
                  item.recharge_distribution_ratio > 0
                    ? rideFix(item.recharge_distribution_ratio, 100)
                    : 0
                }}%
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, computed, onMounted, ref } from "vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { useStore } from "vuex";
import { inviteStatistics,getpartnerInfo,getpartnerData } from "@/api/user";
import { rideFix } from "@/utils/precisionMath";
import {
  Copy,
  NumberToChinese,
  decimalDigitsInputFilter,
} from "@/utils/common.js";
import { ElMessage } from "element-plus";
import moment from "moment";
import { useI18n } from "vue-i18n";
import {
  userRecordInviteDirectList,
  userRecordInviteDataList,
  userRecordInviteLevel,
  userRecordInviteBrokerageBase,
} from "@/api/user";

export default {
  name: "Myinvita",
  components: {
    Norecord
  },
  setup() {
    const { t } = useI18n();
    const state = reactive({
      loading: false,
      datetime: [],
      start_time: "",
      end_time: "",
      active: 1,
      data: {},
      inviteUrl: "",
      name: window.VUE_APP_NAME,
      param: {
        limit: 10,
        page: 0,
      },
      items: [
        { type: "", label: t("user.today"), id: 1 },
        { type: "info", label: t("user.yesterday"), id: 2 },
        { type: "info", label: t("user.week"), id: 3 },
        { type: "info", label: t("user.month"), id: 4 },
      ],
      total: 0,
      dialogVisible: false,
      leverInfo: {}, //用户等级信息
      flag: false,
      userBrokerageInfo: {}, //用户佣金数据
      tagId: 0,
    });
    /**
     * methods
     */
    onMounted(() => {
      // getState();
      // getList();
      // getUserInviteLeverInfo();
      // getUserBrokerageBase();
      state.inviteUrl = window.location.href.split("person")[0];
	  
	  getpartnerInfos()
	  getpartnerDatas()
    });
	// 新—— 个人信息
	const newuserinfo = ref([])
	const getpartnerInfos = () => {
		getpartnerInfo()
		  .then((res) => {
		    if(res.code == 1){
				newuserinfo.value = res.data
			}
		  })
		  .catch((err) => {
		    console.log(err);
		  });
	}
	//新—— 分享记录
	const pages = ref(1)
	const totalpages = ref(1)
	const partnerType = ref(1)
	const fenxianglist = ref([])
	const getpartnerDatas = () => {
		const params = {
		  type: partnerType.value,
		  page: pages.value,
		  limit: 10,
		};
		getpartnerData(params)
		  .then((res) => {
		    if(res.code == 1){
				fenxianglist.value = res.data.data
				totalpages.value = res.data.last_page
			}
		  })
		  .catch((err) => {
		    console.log(err);
		  });
	}
    //获取用户等级信息
    const getUserInviteLeverInfo = () => {
      userRecordInviteLevel()
        .then((res) => {
          let flag = false;
          res.data.condition.forEach((ele) => {
            if (ele.show_status) {
              flag = true;
            }
          });
          state.flag = flag;
          state.leverInfo = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    };
    //获取用户佣金信息
    const getUserBrokerageBase = () => {
      userRecordInviteBrokerageBase().then((res) => {
        state.userBrokerageInfo = res.data;
      });
    };
    // 获取统计
    const getState = () => {
      inviteStatistics().then((res) => {
        state.data = res.data;
      });
    };
    const getList = () => {
      let requestFun =
        state.active === 1
          ? userRecordInviteDataList
          : userRecordInviteDirectList;
      requestFun(state.param).then((res) => {
        state.tableData = res.data.items;
        state.total = res.data.total;
      });
    };
    // 选择时间
    const changeDate = (v) => {
      if (v) {
        state.param.start_time = new Date(v[0]).getTime();
        state.param.end_time = new Date(v[1]).getTime();
        state.tagId = 0;
      } else {
        state.param.start_time = null;
        state.param.end_time = null;
      }
    };
    const $store = useStore();
    const userinfo = computed(() => {
      return $store.state.user.userInfo;
    });
    const inviteLocal = computed(() => {
      return $store.state.user.local;
    });
    const copy = (val) => {
      Copy(val).then(() => {
        ElMessage({
          type: "success",
          message: "ok",
        });
      });
    };
    // 切换tab
    const changeTab = (i) => {
		if(partnerType.value != i){
			pages.value = 1
			partnerType.value = i
			fenxianglist.value = []
			getpartnerDatas()
		}
      // if (state.active !== i) {
      //   state.active = i;
      //   state.param.page = 0;
      //   state.datetime = [];
      //   state.param.start_time = null;
      //   state.param.end_time = null;
      //   state.tagId = 0;
      //   getList();
      // }
    };
    const clickTag = (id) => {
      state.datetime = [];
      if (state.tagId == id) {
        state.tagId = 0;
      } else {
        state.tagId = id;
      }
      if (state.tagId === 1) {
        getToday();
      } else if (state.tagId === 2) {
        getYesterday();
      } else if (state.tagId === 3) {
        getCurrWeekDays();
      } else if (state.tagId === 4) {
        getCurrMonthDays();
      } else {
        state.param.start_time = null;
        state.param.end_time = null;
        state.param.page = 0;
        getList();
      }
    };
    const getToday = () => {
      state.param.start_time = moment(
        moment()
          .startOf("day")
          .valueOf()
      ).format("x");
      state.param.end_time = moment(moment().valueOf()).format("x");
      state.param.page = 0;
      getList();
    };
    const getYesterday = () => {
      state.param.start_time = moment(
        moment()
          .add(-1, "days")
          .startOf("day")
          .valueOf()
      ).format("x");
      state.param.end_time = moment(
        moment()
          .add(-1, "days")
          .endOf("day")
          .valueOf()
      ).format("x");
      state.param.page = 0;
      getList();
    };
    const getCurrWeekDays = () => {
      state.param.start_time = moment(
        moment()
          .week(moment().week())
          .startOf("week")
          .add(1, "days")
          .valueOf()
      ).format("x");
      state.param.end_time = moment(
        moment()
          .week(moment().week())
          .endOf("week")
          .add(1, "days")
          .valueOf()
      ).format("x");
      state.param.page = 0;
      getList();
    };
    const getCurrMonthDays = () => {
      state.param.start_time = moment(
        moment()
          .month(moment().month())
          .startOf("month")
          .valueOf()
      ).format("x");
      state.param.end_time = moment(
        moment()
          .month(moment().month())
          .endOf("month")
          .valueOf()
      ).format("x");
      state.param.page = 0;
      getList();
    };
    const onSubmit = () => {
      state.param.page = 0;
      getList();
    };
    const showLevelDetail = () => {
      if (state.leverInfo.current_level_name) {
        state.dialogVisible = true;
      }
    };
    // 上一页
    const previous = () => {
      if (pages.value > 1) {
        pages.value--
        getpartnerDatas();
      }
    };
    // 下一页
    const next = () => {
      if (pages.value < totalpages.value) {
        pages.value++
        getpartnerDatas();
      }
    };
    return {
      state,
      changeTab,
      userinfo,
	  getState,
      copy,
      getList,
      previous,
      next,
      clickTag,
      onSubmit,
      changeDate,
      getUserInviteLeverInfo,
      getUserBrokerageBase,
      getToday,
      getYesterday,
      getCurrWeekDays,
      getCurrMonthDays,
      showLevelDetail,
      NumberToChinese,
      decimalDigitsInputFilter,
      inviteLocal,
      rideFix,
	  
	  // 新——
	  newuserinfo,
	  pages,
	  partnerType,
	  fenxianglist,
	  totalpages
    };
  },
};
</script>

<style scoped lang="less">
.invita {
  width: 100%;
}
.title {
  width: 100%;
  height: 65px;
  line-height: 65px;
  padding: 0 30px;
  font-family: PingFang SC;
  font-weight: bold;
  margin-bottom: 1px;
}
.detail-box {
  padding: 20px 30px 30px;
  width: 100%;
  background: #ffffff;
}
.box {
  width: 100%;
  height: 128px;
  padding: 30px;
  box-sizing: border-box;
}
.kerword {
  margin-top: 6px;
  width: 186px;
  height: 42px;
  background: #f8f8f8;
  padding: 0 12px;
  box-sizing: border-box;
  line-height: 42px;
}
.keylink {
  margin-top: 6px;
  width: 430px;
  height: 42px;
  background: #f8f8f8;
  padding: 0 12px;
  box-sizing: border-box;
  line-height: 42px;
  letter-spacing: 1px;
}
.mb-13 {
  margin-bottom: 13px;
}
.mb-20 {
  margin-bottom: 20px;
}
.invita-right {
  width: 237px;
}
.w-50 {
  width: 50%;
}
.tab-box {
  width: 100%;
  height: 48px;
  padding: 0 30px;
  box-sizing: border-box;
}
.tab {
  min-width: 70px;
  height: 100%;
  line-height: 48px;
  margin-inline-end: 30px;
  position: relative;
}
.table {
  width: 100%;
  min-height: 157px;
  padding: 0 30px;
  box-sizing: border-box;
}
.invita-rule {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}
.rule {
  line-height: 20px;
}
.pageno {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.next {
  margin-inline-start: 20px;
}
.lever-box {
  width: 130px;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
}
.current-lever {
  font-weight: bold;
  line-height: 18px;
  color: @blue;
  margin-inline-start: 12px;
}
.lever {
  width: 42px;
  height: 42px;
  background: linear-gradient(254.63deg, #fcffeb 0%, #ffda91 95.19%);
  box-sizing: border-box;
  font-family: DINPro;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 26px;
  color: #d7ac58;
  padding: 9px 10px;
  border-radius: 50%;
  margin-bottom: 12px;
  text-align: center;
}
.mb-6 {
  margin-bottom: 6px;
}
.progress {
  width: 400px;
  margin-inline-start: 12px;
  span {
    font-weight: normal;
    font-size: 10px;
    line-height: 14px;
    color: #bdbdbd;
  }
}
.progress-box {
  padding-top: 20px;
  padding-inline-start: 30px;
  padding-inline-end: 30px;
  margin-inline-end: 37px;
  font-weight: normal;
  font-size: 10px;
  line-height: 14px;
  color: #121212;
  .mb-27 {
    margin-bottom: 27px;
  }
  .progress-text {
    color: #bdbdbd;
    min-width: 120px;
    display: inline-block;
  }
}
.font-12 {
  font-size: 12px;
}
.color-88 {
  color: #888;
}
.icons {
  width: 12px;
  height: 12px;
  margin-inline-start: 8px;
}
.mb-17 {
  margin-bottom: 17px;
}
.mbb-17 {
  margin-bottom: -17px;
}
.mbb-10 {
  margin-bottom: -10px;
}
.w_80 {
  width: 110px;
}
.w_50 {
  width: 50%;
  box-sizing: border-box;
  // padding-inline-end: 20px;
  justify-content: flex-end;
  text-align: start;
  justify-content: flex-start;
}
.w_50:nth-child(2n) {
  // padding-inline-start: 20px;
  padding-inline-end: 0px;
  text-align: end;
}
.rebate {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #989898;
  margin-bottom: 16px;
}
.rebate-num {
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  text-align: center;
  color: #424344;
}
.invite-header {
  padding-top: 19px;
}
.ml-10 {
  margin-inline-start: 10px;
}
.mr-8 {
  margin-inline-end: 8px;
}
.el-form-item {
  margin-bottom: 20px;
}
.w_85 {
  width: 85%;
}

.tags {
  min-width: 75px;
  height: 26px;
  border-radius: 2px;
  border: 1px solid #e3e3e3;
  color: #bdbdbd;
  font-size: 14px;
  line-height: 20px;
  padding: 3px 9px;
  text-align: center;
}
.active-tags {
  // color: #3771e2;
  border: 1px solid @blue;
}
.font-16 {
  font-size: 16px;
}
.ml-12 {
  margin-inline-start: 12px;
}
.dialog-item-title {
  padding-top: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f8f8f8;
  font-weight: bold;
  font-size: 12px;
  line-height: 17px;
  color: #989898;
}
.mt-12 {
  margin-top: 12px;
}
.pb-dialog {
  padding: 8px 18px;
}
.w-520 {
  min-width: 520px;
}
.is-rtl {
  .progress:deep(.el-progress-bar__inner) {
    left: auto;
    right: 0;
  }
  .invita:deep(.eltablebg) {
    text-align: start;
  }
  .bdl-borderBase {
    border-left: none;
    border-right: 1px solid;
  }
  .bdr-borderBase {
    border-right: none;
    border-left: 1px solid;
  }
}

.header{
	font-size: 16px;
}
.header div{
	flex: 1;
	height: 46px;
	line-height: 46px;
}
</style>
<style lang="less">
.progress .el-progress-bar__inner {
  background: linear-gradient(90deg, @blue 0%, #134cbc 100%);
}
.invita .el-date-editor--datetimerange.el-input,
.invita .el-date-editor--datetimerange.el-input__inner {
  width: 600px;
}
</style>
